<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>格式化输入</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            格式化输入<code>jquery.formatter.js</code>
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">日期：</label>
                                        <div class="col-md-8">
                                            <input class="form-control formatter" data-pattern="{{9999}}/{{99}}/{{99}}"
                                                type="text">
                                            <span class="help-block ">2017/10/11</span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">日期时间：</label>
                                        <div class="col-md-8">
                                            <input class="form-control formatter"
                                                data-pattern="{{9999}}-{{99}}-{{99}} {{99}}:{{99}}:{{99}}" type="text">
                                            <span class="help-block ">2017-10-11 10:11:25</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">手机号：</label>
                                        <div class="col-md-8">
                                            <input class="form-control  formatter"
                                                data-pattern="{{999}}-{{9999}}-{{9999}}" type="text">
                                            <span class="help-block ">189-1234-1234</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">国际手机号码：</label>
                                        <div class="col-md-8">
                                            <input class="form-control formatter"
                                                data-pattern="+86 {{999}}-{{9999}}-{{9999}}" type="text">
                                            <span class="help-block ">+86 189-1234-1234</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">座机电话：</label>
                                        <div class="col-md-8">
                                            <input class="form-control formatter" data-pattern="({{9999}}) {{9999999}}"
                                                type="text">
                                            <span class="help-block ">(0539) 8801888</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">银行卡号：</label>
                                        <div class="col-md-8">
                                            <input class="form-control formatter"
                                                data-pattern="{{9999}}-{{9999}}-{{9999}}-{{9999}}" type="text">
                                            <span class="help-block ">6666-6666-6666-6666</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">固定格式：</label>
                                        <div class="col-md-8">
                                            <input class="form-control formatter"
                                                data-pattern="A{{999}}-B{{999}}-C{{9999}}+{{9999}}D" type="text">
                                            <span class="help-block ">A123-B123-C9999+1234D</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">百分比：</label>
                                        <div class="col-md-8">
                                            <input class="form-control formatter" data-pattern="{{99}}.{{99}}%"
                                                type="text">
                                            <span class="help-block ">99.99%</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">货币：</label>
                                        <div class="col-md-8">
                                            <input class="form-control formatter"
                                                data-pattern="￥{{999}}.{{999}}.{{999}}.{{99}}" type="text">
                                            <span class="help-block ">￥999,999,999.00</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">货币：</label>
                                        <div class="col-md-8">
                                            <input class="form-control formatter text-right"
                                                data-pattern="￥{{999}}.{{999}}.{{999}}.{{99}}" type="text">
                                            <span class="help-block ">￥999,999,999.00</span>
                                        </div>
                                    </div>

                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script src="./../../../static/plugins/form-formatter/jquery.formatter.js"></script>

</body>

</html>